<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式</title>
    <style>
        * {
            padding: 0;
            border: 0;
            margin: 0;
            outline: 0;
            box-sizing: border-box;

        }

        .mlg {
            width: 1rem;
            height: 500px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="mlg">

    </div>

</body>
<script>
    document.documentElement.style.fontSize = window.innerWidth + "px";
    // 这行代码是 JavaScript 的一个操作，用于设置 HTML 文档根元素的字体大小。

    // 让我解释一下这段代码的含义：

    // document.documentElement 用于获取 HTML 文档中的根元素，即 <html> 元素。
    // style.fontSize 是根元素的 CSS 样式属性，用于设置字体大小。
    // window.innerWidth 返回当前窗口的视口宽度（不包括滚动条）。
    // window.innerWidth + "px" 将视口宽度转换为字符串，并添加像素 (px) 单位。
    // 因此，document.documentElement.style.fontSize = window.innerWidth + "px"; 的含义是：将根元素的字体大小设置为当前窗口宽度的像素值。

    // 这种设置方式通常用于响应式设计中，为了适应不同屏幕尺寸的设备，可以将根元素的字体大小设置为视口宽度的值。这样可以方便地使用 rem 单位进行其他样式的计算，使页面元素相对于根元素进行自适应缩放。

    // 需要注意的是，在实际项目中，通常会结合事件监听来实现字体大小的动态调整，以便在窗口大小改变时实时更新字体大小。
</script>

</html>